<template>
  <view class="page-wrap">
    <view class="main-info" v-if="hyInfo">
      <view class="image">
        <image class="image" :src="getImagePath(hyInfo.hy_profile_url,true)" mode="" v-if="hyInfo.hy_profile_url"></image>
      </view>
      <view class="info">
        <view class="top">
          <view class="hy-name">
            {{hyInfo.hy_name||''}}
          </view>
          <!--  <view class="button">
            <button class="cu-btn sm round">切换<text class="cuIcon-right margin-left-xs"></text></button>
          </view> -->
        </view>
        <view class="bottom">
          会员编号：{{hyInfo.hy_no||''}}
        </view>
      </view>
    </view>
    <view class="radio-box">
      <view class="label">
        调理项目
      </view>
      <view class="value">
        <u-subsection :list="subList" :current="curSub" @change="changSub"></u-subsection>
      </view>
    </view>

    <view class="sub-title" v-if="!hp_no">
      总体调理效果
    </view>
<!--    <view class="sub-title" v-if="hp_no">
      单个调理效果
    </view> -->
    <view class="detail-box">
      <view class="detail-title">
        调理效果跟踪
      </view>
      <view class="chart-box">
        <uni-echart class="uni-ec-charts" canvasId="uni-ec-charts" id="uni-ec-charts" :ec="echartsOption" v-if="listData.length>0">
        </uni-echart>
        <view class="" v-else>
          <u-empty mode="data"></u-empty>
        </view>
      </view>
    </view>


    <view class="sub-title" v-if="!hp_no&&singleSchemeData">
      单个方案调理效果
    </view>
    <view class="detail-box" v-if="!hp_no&&singleSchemeData">
      <view class="sub-list" v-if="singleSchemeData">
        <button class="cu-btn margin-right-xs" :class="{'bg-blue':curScheme===index}"
          v-for="(btn,index) in singleSchemeData" @click="changeScheme(index)">{{btn.name||''}}</button>
      </view>
      <view class="chart-box" v-for="(item,index) in singleSchemeData" :class="{'hidden':curScheme!==index}"
        v-if="curScheme==index">
        <uni-echart class="uni-ec-charts" :canvasId="'uni-ec-charts'+index" :id="'uni-ec-charts'+index"
          :ec="item.echartsOption">
        </uni-echart>
      </view>
    </view>
  </view>
</template>
<!-- hp_no 健康方案编号 -->
<script>
  import uniEchart from '@/components/uni-ec-canvas/uni-echart.vue'
  import dayjs from '../../../common/dayjs.min.js'

  let option = {
    title: {
      // text: '折线图堆叠'
    },

    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        label: {
          show: true,
          backgroundColor: '#fff',
          color: '#556677',
          borderColor: 'rgba(0,0,0,0)',
          shadowColor: 'rgba(0,0,0,0)',
          shadowOffsetY: 0
        },
        lineStyle: {
          width: 0
        }
      },
      backgroundColor: '#fff',
      textStyle: {
        color: '#5c6c7c'
      },
      padding: [10, 10],
      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
    },
    legend: {
      data: ['偏颇值', '症状数', '风险度', '能量值']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
    },
    yAxis: {
      type: 'value'
    },
    color: [
      "#fbce6b",
      "#9ad081",
      "#607aca",
      "#ff007f"
    ],
    series: [{
        name: '偏颇值',
        type: 'line',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      },
      {
        name: '症状数',
        type: 'line',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      },
      {
        name: '风险度',
        type: 'line',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      },
      {
        name: '能量值',
        type: 'line',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      }
    ]
  }


  export default {
    components: {
      uniEchart
    },
    computed: {
      singleSchemeData() {
        // 单个方案
        let allData = this.listData;
        if (Array.isArray(allData) && allData.length > 0) {
          let res = {}
          allData.forEach(item => {
            if (!res[item.hp_no]) {
              res[item.hp_no] = {
                no: item.hp_no,
                name: item.hp_name,
                data: []
              }
            }
            res[item.hp_no].data.push(item)
          })
          for (let key in res) {
            const item = res[key]
            const data = res[key].data;
            if (data.length > 0) {
              let series = {
                偏颇值: [],
                症状数: [],
                风险度: [],
                能量值: []
              }
              let cate = []
              data.forEach(item => {
                cate.push(dayjs(item.create_time).format("MM-DD"))
                series['偏颇值'].push(item.bias_values)
                series['症状数'].push(item.symptoms_number)
                series['风险度'].push(item.risk_degree)
                if (item.energy_value) {
                  series['能量值'].push(Number(item.energy_value))
                }
              })
              let options = this.deepClone(option)
              options.series[0].data = series['偏颇值']
              options.series[1].data = series['症状数']
              options.series[2].data = series['风险度']
              options.series[3].data = series['能量值']
              options.xAxis.data = cate
              item['echartsOption'] = {
                option: options
              }
            } else {
              item['echartsOption'] = {}
            }
          }
          return res
        }
      }
    },
    data() {
      return {
        curScheme: 0,
        series: [],
        category: [],
        echartsOption: {
          option
        },
        hy_no: "",
        hp_no: '', //方案编号
        hyInfo: {},
        listData: [],
        subList: [{
            name: "体质"
          },
          {
            name: "糖尿病"
          },
          {
            name: "高血压"
          }
        ],
        curSub: 0
      }
    },
    methods: {
      changeScheme(index = 0) {
        this.curScheme = index
      },
      changSub(index) {
        this.curSub = index
        this.getData()
      },
      getInfo() {
        let req = {
          "serviceName": "srvstore_member_mgmt_select",
          "colNames": ["*"],
          "condition": [{
            colName: 'hy_no',
            ruleType: 'eq',
            value: this.hy_no
          }],
          "page": {
            "pageNo": 1,
            "rownumber": 99999
          },
        }

        let url = this.getServiceUrl('fyzhmd', 'srvstore_member_mgmt_select', 'select');
        this.$http.post(url, req).then(res => {
          if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
            this.hyInfo = res.data.data.find(item => item.hy_no === this.hy_no)
          }
        })
      },
      getData() {
        let req = {
          "serviceName": "srvfyzh_health_tonning_record_select",
          "colNames": ["*"],
          "condition": [{
            colName: 'hy_no',
            ruleType: 'eq',
            value: this.hy_no
          }],
          order: [{
            colName: "create_time",
            orderType: "desc"
          }],
          // group: [{
          //     colName: 'bias_values', //偏颇值
          //     type: 'sum'
          //   },
          //   {
          //     colName: 'symptoms_number', //症状数
          //     type: 'sum'
          //   },
          //   {
          //     colName: 'risk_degree', //风险度
          //     type: 'sum'
          //   },
          //   {
          //     colName: 'create_time',
          //     type: "by_date"
          //   }
          // ],
          "page": {
            "pageNo": 1,
            "rownumber": 7
          },
        }
        if (this.hp_no) {
          req.condition.push({
            colName: 'hp_no',
            ruleType: 'eq',
            value: this.hp_no
          })
        }
        let pro = this.subList[this.curSub]
        if (pro?.name) {
          req.condition.push({
            colName: 'gy_project',
            ruleType: 'eq',
            value: pro.name
          })
        }
        let url = this.getServiceUrl('fyzhmd', 'srvfyzh_health_tonning_record_select', 'select');
        this.$http.post(url, req).then(res => {
          if (res.data.state === 'SUCCESS' && Array.isArray(res.data.data)) {
            let data = res.data.data.reverse();
            this.listData = data
            
            if (data.length > 0) {
              let series = {
                偏颇值: [],
                症状数: [],
                风险度: [],
                能量值: []
              }
              let cate = []
              this.curScheme = data[0].hp_no
              data.forEach(item => {
                cate.push(dayjs(item.create_time).format("MM-DD"))
                series['偏颇值'].push(item.bias_values)
                series['症状数'].push(item.symptoms_number)
                series['风险度'].push(item.risk_degree)
                if (item.energy_value) {
                  series['能量值'].push(Number(item.energy_value))
                }
              })
              let options = option
              options.series[0].data = series['偏颇值']
              options.series[1].data = series['症状数']
              options.series[2].data = series['风险度']
              options.series[3].data = series['能量值']
              options.xAxis.data = cate
              this.echartsOption.option = options
            } else {
              this.series = []
              this.listData = []
              this.echartsOption.option = {}
            }
          }
        })
      },
    },
    onLoad(option) {
      if (option.hp_no) {
        this.hp_no = option.hp_no
      }
      if (option.hy_no) {
        this.hy_no = option.hy_no
        this.getInfo()
        this.getData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-wrap {
    background-color: #F8F8FA;
    min-height: calc(100vh - var(--window-top));
    overflow: scroll;
  }

  .main-info {
    width: 100%;
    background-color: #fff;
    padding: 20rpx;
    display: flex;

    .image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      line-height: 120rpx;
      text-align: center;
      border: 1rpx solid #f5f5f5;
      margin-right: 30rpx;
    }

    .info {
      flex: 1;

      .top {
        padding: 10rpx;
        display: flex;
        justify-content: space-between;

        .button {
          .cu-btn {
            color: #ADAEBB;
            background-color: #fff;
            border: 1rpx solid #f6f6f6;
          }
        }
      }

      .bottom {
        color: #ADAEBB;
      }
    }
  }

  .radio-box {
    display: flex;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx 40rpx;
    margin: 20rpx 0;
    justify-content: space-between;
    align-items: center;

    .value {
      width: 500rpx;
    }
  }

  .sub-title {
    padding: 20rpx;
    margin: 20rpx;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    margin-bottom: 4rpx;
  }

  .detail-box {
    background-color: #fff;
    padding: 20rpx;
    margin: 20rpx;
    margin-top: 0;
    border-radius: 0 0 20rpx 20rpx;

    .sub-list {
      .cu-btn {
        margin-bottom: 5px;
      }
    }

    .detail-title {
      background: #F5F8FF;
      border-radius: 22px;
      font-size: 16px;
      font-family: 苹方-简;
      font-weight: normal;
      color: #0088FE;
      border-radius: 40rpx;
      text-align: center;
      padding: 20rpx;
      margin-bottom: 20rpx;
    }

    .chart-box {
      height: 500rpx;
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      &.hidden {
        opacity: 0;
      }
    }

    .table-box {
      margin-top: 20rpx;
      border: 1rpx solid #F2F1F6;
      border-radius: 20rpx 20rpx 0 0;
      font-size: 14px;
      font-family: 苹方-简;
      font-weight: normal;
      color: #333333;

      .table-row {
        padding: 20rpx;
        border-bottom: 1rpx solid #F2F1F6;
        display: flex;
        justify-content: space-between;

        &.table-head {
          background-color: #F8F8FA;
        }

        &:last-child {
          border-bottom: none;
        }
      }
    }

    .remark-box {
      .remark-item {
        .remark-title {
          font-size: 14px;
          font-family: 苹方-简;
          font-weight: 600;
          color: #333333;
        }

        .remark-content {
          background: #F8F8FA;
          border-radius: 8px;
          font-size: 12px;
          font-family: 苹方-简;
          font-weight: normal;
          color: #ADAEBB;
          position: relative;
          padding: 20rpx;
          margin: 30rpx 0;
          border-radius: 20rpx;

          &::before {
            position: absolute;
            content: '';
            border: 30rpx solid transparent;
            border-bottom-color: #F8F8FA;
            top: -25px;
            left: 5%;
          }
        }
      }
    }
  }
</style>
